<template>
    <div v-if="arr.length">
        <div class="item">
            <van-sidebar v-model="activeKey">
            <van-sidebar-item :title="v.biaoqian" v-for="(v,i) in arr" :key="i" @click="fn(i)"/>
            </van-sidebar>
        </div>
        
        <div class="con">
            <img :src="arr[num].img">
            <p>
                <span class="font1">—</span>
                <span class="font2">{{arr[num].title1}}</span>
                <span class="font3">—</span>
            </p>
            <ul>
                <li v-for="(item,index) in arr[num].list" :key="index">
                    <img :src="item.img1" :class="item.class">
                    <span>{{item.title}} </span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import {two} from "@/api/fenLei.js"
export default {
    data() {
        return {
        activeKey: 0,
        arr:[],
        num:0
        };
    },
    mounted(){
        two().then((ok)=>{
            this.arr=ok.data.farr
            console.log(ok.data.farr)
        })
    },
    methods: {
        fn(i){
         this.num=i
        }
    },
}
</script>

<style lang="scss" scoped>
   .item{
       width: 0.61rem;
        position: absolute;
    }
    .con{
        width: 2.91rem;
        position: absolute;
        right: 0;
        img{
            width: 2.67rem;
            height: 0.95rem;
            margin-left: 0.1rem;
        }
        p{
            width: 100%;
            height: 0.36rem;
            text-align: center;
            margin-top: 0.1rem;
            font-size: 0.14rem;
            color: #999;
            .font2{
                margin: 0 0.1rem;
            }
        }
        ul{
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
            li{
                display: flex;
                flex-direction: column;
                width: 0.96rem;
                height: 0.85rem;
                margin-bottom: 0.3rem;
                img{
                    width: 0.6rem;
                    height: 0.6rem;
                }
                 .img1{
                    width: 0.6rem;
                    height: 0.24rem;
                }
                span{
                    width: 0.76rem;
                    height: 0.25rem;
                    font-size: 0.14rem;
                    color: #666;
                    text-align: center;
                }
            }
        }
    }
</style>